<template>
  <div class="register-bg min-h-screen flex items-center justify-center relative overflow-hidden">
    <!-- 背景装饰 -->
    <div class="register-bg-decor absolute -z-10 top-0 left-0 w-full h-full pointer-events-none">
      <div class="register-bg-ball1 absolute left-[-80px] top-[-80px] w-72 h-72 bg-blue-200 opacity-60 rounded-full blur-2xl animate-float-slow"></div>
      <div class="register-bg-ball2 absolute right-[-60px] bottom-[-60px] w-64 h-64 bg-pink-200 opacity-50 rounded-full blur-2xl animate-float-slow2"></div>
      <div class="register-bg-ball3 absolute left-1/2 top-1/2 w-96 h-32 bg-purple-100 opacity-40 rounded-full blur-3xl -translate-x-1/2 -translate-y-1/2 rotate-12"></div>
    </div>
    <transition name="fade">
      <n-card class="w-full max-w-lg py-12 shadow-xl rounded-3xl bg-white/80 backdrop-blur-md border-0">
        <div class="flex flex-col items-center mb-8">
          <img src="/vite.svg" alt="SmartInput Logo" class="w-16 h-16 mb-4 drop-shadow-lg animate-bounce-slow" />
          <h2 class="text-2xl font-extrabold text-purple-700 mb-2 tracking-tight">注册</h2>
          <p class="mb-2 text-gray-400 text-sm">欢迎加入，请填写注册信息</p>
        </div>
        <n-form @submit.prevent="onRegister" :model="form" class="flex flex-col gap-4">
          <n-form-item label="用户名">
            <n-input v-model:value="form.userName" placeholder="请输入用户名" size="large" />
          </n-form-item>
          <n-form-item label="密码">
            <n-input v-model:value="form.password" type="password" placeholder="请输入密码" size="large" />
          </n-form-item>
          <n-form-item>
            <n-button type="primary" block attr-type="submit" class="register-btn">注册</n-button>
          </n-form-item>
        </n-form>
        <n-alert v-if="error" type="error" class="mt-2">{{ error }}</n-alert>
        <n-alert v-if="success" type="success" class="mt-2">注册成功，请前往登录！</n-alert>
        <router-link to="/login" class="text-blue-500 text-sm mt-4 inline-block hover:underline">已有账号？去登录</router-link>
      </n-card>
    </transition>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { register } from '../api/auth';

const form = ref({ userName: '', password: '' });
const error = ref('');
const success = ref(false);
const router = useRouter();

const onRegister = async () => {
  error.value = '';
  success.value = false;
  try {
    await register(form.value.userName, form.value.password);
    success.value = true;
    setTimeout(() => router.push('/login'), 1000);
  } catch (e: any) {
    error.value = e.response?.data?.message || '注册失败';
  }
};
</script>

<style>
.register-bg {
  background: linear-gradient(120deg, #dbeafe 0%, #f3e8ff 50%, #fce7f3 100%);
}
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.6s cubic-bezier(0.4,0,0.2,1);
}
.fade-enter-from, .fade-leave-to {
  opacity: 0;
}
.register-btn {
  font-size: 1.1rem;
  font-weight: 500;
  border-radius: 1.5rem;
  transition: transform 0.15s, box-shadow 0.15s;
  box-shadow: 0 2px 8px 0 rgba(120, 80, 200, 0.06);
}
.register-btn:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 4px 16px 0 rgba(120, 80, 200, 0.12);
}
@media (max-width: 600px) {
  .n-card {
    padding: 1.5rem 0.5rem !important;
  }
  h2 {
    font-size: 1.2rem;
  }
  .register-btn {
    font-size: 1rem;
  }
}
.animate-bounce-slow {
  animation: bounce 2.5s infinite;
}
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
/* 背景浮动动画 */
@keyframes float-slow {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-18px) scale(1.04); }
}
@keyframes float-slow2 {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(12px) scale(1.03); }
}
.animate-float-slow {
  animation: float-slow 6s ease-in-out infinite;
}
.animate-float-slow2 {
  animation: float-slow2 7s ease-in-out infinite;
}
</style> 